<template>
  <view class="">
    <view class="bg-white px-15 mb-12">
      <view class="py-15 text-16 leading-16">确认订单</view>
      <view class="">
        <view v-for="item in goodsList" :key="item.id" class="flex pb-15">
          <image class="goods-img" :src="item.logo" mode="" />
          <view class="flex-vb ">
            <view class="ellipsis-2">{{ item.name }}</view>
            <view class="leading-20">
              <text class="text-error"><text class="text-12">￥</text><text class="text-16">{{ item.price }}</text></text>
              <text class="text-info text-12 line-through ml-10">原价:￥{{ item.original_price }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="coupon.price > 0" class="flex-ba bg-white text-15 leading-20 py-20 px-15 mb-12">
      <view class="flex-a">
        <view class="mr-15 text-info">限时优惠</view>
        <view class="text-13 text-error">优惠倒计时：{{ countDown }}</view>
      </view>
      <view class="flex-a">
        <view class="mr-15">{{ coupon.price }}元优惠券</view>
        <view class="coupon-dot" />
      </view>
    </view>
    <view v-if="coupon.price > 0" class="bg-white text-15 leading-20 py-20 px-15 mb-12">
      <view class="flex-ba ">
        <view class="mr-15 text-info">商品金额</view>
        <view class="text-error">￥{{ mathRound(amount.actual + amount.discount) }}</view>
      </view>
      <view class="flex-ba mt-24">
        <view class="xmr-15 text-info">套餐优惠</view>
        <view class="text-error">-￥{{ amount.discount }}</view>
      </view>
    </view>
    <view class="footer">
      <view class="footer-fixed bg-white flex-ba hair--t shadow-t">
        <view class="px-16">实付：<text class="text-error">￥{{ amount.actual }}</text></view>
        <view class="pay-btn flex-ca" hover-class="hover" @click="onPay">立即支付</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  onLoad(options = {}) {
    this.goodsId = Number(options.goodsId)
    if (options.type) {
      this.type = Number(options.type) 
    }
    this.getDetail()
  },
  data() {
    return {
      goodsId: 0,
      type: 1,
      timer: null,
      countDown: '',
      goodsList: [],
      coupon: {},
      orderNo: ''
    }
  },
  computed: {
    amount() {
      let actual = 0
      let discount = 0
      this.goodsList.forEach((v) => {
        const price = parseFloat(v.price)
        const original = parseFloat(v.original_price)
        actual += price
        // original += original
        discount += original - price
      })
      if (this.coupon.price) {
        let coupon = parseFloat(this.coupon.price)
        if (coupon > actual)
          coupon = actual
        actual -= coupon
        discount += coupon
      }
      return {
        actual: this.mathRound(actual),
        discount: this.mathRound(discount)
      }
    }
  },
  methods: {
    mathRound(val) {
      return Math.round(val * 100) / 100
    },
    onPay() {
      const that = this
      that.$f.post('common/pay', {
        order_sn: that.orderNo,
        trade_type: 'JSAPI',
        client: that.$f.getClient()
      }).then(res => {
        that.$f.wxpay(res.data).then(res2 => {
          that.$f.tips({ title: '支付成功' }, '/pages/user/order')
        }, err2 => {
          that.$f.toast('支付失败')
        })
      })
    },
    getDetail() {
      this.$f.post('api/payDetail', { id: this.goodsId, type: this.type }).then(res => {
        this.goodsList = res.data.goodsList || []
        this.coupon = res.data.coupon || {}
        this.orderNo = res.data.orderNo || ''
        if (this.coupon.time) {
          this.timer = setInterval(() => {
            if (this.coupon.time) {
              this.coupon.time -= 1
              this.countDown = this.getCountDown(this.coupon.time * 1000)
            } else {
              clearInterval(this.timer)
            }
          }, 1000)
        }
      })
    },
    getCountDown(endtime) {
      const total = endtime - Date.parse(new Date())
      let seconds = Math.floor((total / 1000) % 60)
      let minutes = Math.floor((total / 1000 / 60) % 60)
      let hours = Math.floor((total / (1000 * 60 * 60)) % 24)
      const days = Math.floor(total / (1000 * 60 * 60 * 24))
		
      hours = hours > 9 ? hours : `0${hours}`
      minutes = minutes > 9 ? minutes : `0${minutes}`
      seconds = seconds > 9 ? seconds : `0${seconds}`
      let str = `${hours}:${minutes}:${seconds}`
      if (days > 0)
        str = `${days}天 ${str}`
      return str
    }
  }
}
</script>

<style lang="scss">
.goods-img {
	flex-shrink: 0;
	display: block;
	width: 180rpx;
	height: 140rpx;
	margin-right: 16rpx;
	border-radius: 8rpx;
}
.coupon-dot {
	position: relative;
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	border: 1rpx solid #FF7A38;
	&::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		background-color: #FF7A38;
	}
}
.footer {
	height: 108rpx;
}
.footer-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	font-size: 40rpx;
	height: 108rpx;
	width: 100%;
	.pay-btn {
		color: #fff;
		width: 300rpx;
		height: 108rpx;
		background-color: #FF7A38;
	}
}
</style>
